<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Magnifier with Native JS and Larger Preview</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }
        .container {
            position: relative;
            width: min(80vw, 400px);
            height: auto;
        }
        #imgToMagnify {
            display: block;
            width: 100%;
            height: auto;
        }
        .lens {
            position: absolute;
            border: 2px solid #fff;
            background-color: rgba(255, 255, 255, 0.7);
            opacity: 1;
            transition: background-position 0.1s ease-out;
            pointer-events: none;
        }
        #previewBox {
            display: none;
            position: absolute;
            top: calc(100% + 10px);
            left: 50%;
            transform: translateX(-50%);
            width: 120%; /* 增大预览框的宽度 */
            height: 120%; /* 增大预览框的高度 */
            overflow: hidden;
            background-color: #fff;
            border: 1px solid #ccc;
            z-index: 1;
        }
    </style>
</head>
<body>

<div class="container">
    <img src="https://img.zcool.cn/community/01a79760b5cc1111013eaf70b18662.jpg@1280w_1l_2o_100sh.jpg" alt="Sample Image" id="imgToMagnify">
    <div class="lens"></div>
    <div id="previewBox"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const img = document.getElementById('imgToMagnify');
        const lens = document.querySelector('.lens');
        const previewBox = document.getElementById('previewBox');
        const lensWidth = 100;
        const lensHeight = 100;
        const magnification = 4; // 调整放大倍数以匹配预览框尺寸变化

        lens.style.width = `${lensWidth}px`;
        lens.style.height = `${lensHeight}px`;

        img.addEventListener('mousemove', function(e) {
            let pos = getCursorPos(img, e);
            let x = pos.x - (lensWidth / 2);
            let y = pos.y - (lensHeight / 2);

            if (x > img.offsetWidth - lensWidth) { x = img.offsetWidth - lensWidth; }
            if (x < 0) { x = 0; }
            if (y > img.offsetHeight - lensHeight) { y = img.offsetHeight - lensHeight; }
            if (y < 0) { y = 0; }

            lens.style.left = `${x}px`;
            lens.style.top = `${y}px`;

            updatePreview(x, y, img, previewBox, magnification);
        });

        img.addEventListener('mouseenter', function() {
            lens.style.display = 'block';
            previewBox.style.display = 'block';
        });

        img.addEventListener('mouseleave', function() {
            lens.style.display = 'none';
            previewBox.style.display = 'none';
        });
    });

    function getCursorPos(img, e) {
        const rect = img.getBoundingClientRect();
        return {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
        };
    }

    function updatePreview(x, y, img, preview, mag) {
        const bgPosX = -((x * mag) - (preview.offsetWidth / 2));
        const bgPosY = -((y * mag) - (preview.offsetHeight / 2));
        preview.style.backgroundImage = `url(${img.src})`;
        preview.style.backgroundSize = `${img.offsetWidth * mag}px ${img.offsetHeight * mag}px`; // 保持放大倍数与预览框尺寸匹配
        preview.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
    }
</script>

</body>
</html>